<template>
  <div class="amap-page-container">
    <!--    <el-row>-->
    <!--      <el-col :span="24">-->
    <!--        <div :style="{width:'100%',height:'600px'}">-->
    <!--          <el-amap vid="amap" :zoom="zoom" class="amap-demo" :center="center" :plugin="plugin">-->
    <!--            <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity"></el-amap-circle-marker>-->
    <!--          </el-amap>-->
    <!--          <el-amap vid="amapDemo" :plugin="plugin" class="amap-demo">-->
    <!--          </el-amap>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <div class="echarts">
      <div :style="{height:'650px',width:'100%'}" ref="myEchart"></div>
    </div>


    <!--    <div class="toolbar">-->
    <!--        <span v-if="loaded">-->
    <!--          location: lng = {{ lng }} lat = {{ lat }}-->
    <!--        </span>-->
    <!--      <span v-else>正在定位</span>-->
    <!--    </div>-->
    <div
      v-on:click="req_post()"
    >
      查询周边
    </div>
  </div>
</template>

<script>
  var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];
  var lngExtent = [39.5, 40.6];
  var latExtent = [115.9, 116.8];
  var cellCount = [50, 50];
  var cellSizeCoord = [
    (lngExtent[1] - lngExtent[0]) / cellCount[0],
    (latExtent[1] - latExtent[0]) / cellCount[1]
  ];
  var gapSize = 0;
  var data = [[0,0,5],[1,0,5]];

  import echarts from "echarts"
  import "echarts/map/js/province/guizhou"
  export default {
    name: "index",
    data() {
      const self = this
      return {
        center: [104.07928414, 26.75665154],
        lng: 0,
        lat: 0,
        loaded: false,
        zoom: 11,
        markers: [
          {
            center: [104.0793457, 26.75663884],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0794729, 26.75663951],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0796009, 26.75664034],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0792178, 26.75657477],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0793458, 26.75657504],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.079473, 26.75657676],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0795979, 26.75657703],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0789648, 26.75651021],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0790926, 26.75651048],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0792188, 26.75651112],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0793466, 26.75651314],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0794729, 26.756513],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0796005, 26.75651382],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0787139, 26.7564455],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0788398, 26.75644562],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0789654, 26.75644634],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.079092, 26.75644671],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.07922, 26.75644862],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0793469, 26.75644938],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0794737, 26.75645006],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)',
          },
          {
            center: [104.0795996, 26.75645074],
            radius: 5,
            fillOpacity: 1,
            fillColor: 'rgba(0,0,255,1)'
          }
        ],
        plugin: ['ToolBar', {
          pName: 'MapType',
          defaultType: 1,
          events: {
            init(o) {
              console.log(o);
            }
          }
        }],
        // plugin: [{
        //   enableHighAccuracy: true,//是否使用高精度定位，默认:true
        //   timeout: 100,          //超过10秒后停止定位，默认：无穷大
        //   maximumAge: 0,           //定位结果缓存0毫秒，默认：0
        //   convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        //   showButton: true,        //显示定位按钮，默认：true
        //   buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
        //   showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
        //   showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
        //   panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        //   zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
        //   extensions:'all',
        //   pName: 'Geolocation',
        //   events: {
        //     init(o) {
        //       // o 是高德地图定位插件实例
        //       o.getCurrentPosition((status, result) => {
        //         console.log(result)
        //         if (result && result.position) {
        //           // self.lng = result.position.lng;
        //           // self.lat = result.position.lat;
        //           // self.center = [self.lng, self.lat];
        //           // self.loaded = true;
        //           // self.$nextTick();
        //         }
        //       });
        //       self.markers.push({
        //         center: [104.0793457, 26.75663884],
        //         radius: 20,
        //         fillOpacity: 1,
        //         fillColor: 'rgba(0,0,255,1)'
        //       })
        //     }
        //   }
        // }]
      }
    },
    mounted() {
      this.chinaConfigure();
    },
    methods: {
      getCoord(params, api, lngIndex, latIndex) {
        var coords = params.context.coords || (params.context.coords = []);
        var key = lngIndex + '-' + latIndex;

        // bmap returns point in integer, which makes cell width unstable.
        // So we have to use right bottom point.
        return coords[key] || (coords[key] = api.coord([
          +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
          +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
        ]));
      },

      chinaConfigure() {
        console.log(this.userJson)
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          backgroundColor: "#02AFDB",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: '贵州', // 表示中国地图
            roam: true,
            boundingCoords: [
              // 定位左上角经纬度
              [104.0787139, 26.75663884],
              // 定位右下角经纬度
              [104.0795996, 26.7564455]
            ],
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: "rgba(238,238,238)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              type: 'custom',
              coordinateSystem: 'geo',
              renderItem: function renderItem(params, api) {
                var context = params.context;
                var lngIndex = api.value(0);
                var latIndex = api.value(1);
                var coordLeftTop = [
                  +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
                  +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
                ];
                var pointLeftTop = this.getCoord(params, api, lngIndex, latIndex);
                var pointRightBottom = this.getCoord(params, api, lngIndex + 1, latIndex + 1);

                return {
                  type: 'rect',
                  shape: {
                    x: pointLeftTop[0],
                    y: pointLeftTop[1],
                    width: pointRightBottom[0] - pointLeftTop[0],
                    height: pointRightBottom[1] - pointLeftTop[1]
                  },
                  style: api.style({
                    stroke: 'rgba(0,0,0,0.1)'
                  }),
                  styleEmphasis: api.styleEmphasis()
                };
              },
              animation: false,
              emphasis: {
                itemStyle: {
                  color: 'yellow'
                }
              },
              encode: {
                tooltip: 2
              },
              data: [{"name":"场站0","value":[104.0793457,26.75663884]},{"name":"场站1","value":[104.0794729,26.75663951]},{"name":"场站2","value":[104.0796009,26.75664034]},{"name":"场站3","value":[104.0792178,26.75657477]},{"name":"场站4","value":[104.0793458,26.75657504]},{"name":"场站5","value":[104.079473,26.75657676]},{"name":"场站6","value":[104.0795979,26.75657703]},{"name":"场站7","value":[104.0789648,26.75651021]},{"name":"场站8","value":[104.0790926,26.75651048]},{"name":"场站9","value":[104.0792188,26.75651112]},{"name":"场站10","value":[104.0793466,26.75651314]},{"name":"场站11","value":[104.0794729,26.756513]},{"name":"场站12","value":[104.0796005,26.75651382]},{"name":"场站13","value":[104.0787139,26.7564455]},{"name":"场站14","value":[104.0788398,26.75644562]},{"name":"场站15","value":[104.0789654,26.75644634]},{"name":"场站16","value":[104.079092,26.75644671]},{"name":"场站17","value":[104.07922,26.75644862]},{"name":"场站18","value":[104.0793469,26.75644938]},{"name":"场站19","value":[104.0794737,26.75645006]},{"name":"场站20","value":[104.0795996,26.75645074]}]
            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "毕节",
                "value": 599
              }]
            }
          ],
        })
        myChart.on("click", (params) => {
          console.log("params", params)
        })

      }
    }
  }
</script>

<style lang="scss">

</style>
